<template>
  <div ref="canvasContainer" class="three-container"></div>
</template>

<script>
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

export default {
  name: 'ThreeScene',
  data() {
    return {
      animationId: ''
    };
  },
  mounted() {
    // 场景
    this.scene = new THREE.Scene();

    // 相机
    this.camera = new THREE.PerspectiveCamera(
      75,
      this.$refs.canvasContainer.clientWidth / this.$refs.canvasContainer.clientHeight,
      1,
      1000
    );
    this.camera.position.set(0, 150, 200);

    // 渲染器
    this.renderer = new THREE.WebGLRenderer({ antialias: true });
    this.renderer.setPixelRatio(window.devicePixelRatio * 0.5); // 新增，降低分辨率
    this.renderer.setSize(this.$refs.canvasContainer.clientWidth, this.$refs.canvasContainer.clientHeight);
    this.$refs.canvasContainer.appendChild(this.renderer.domElement);

    // 控制器
    this.controls = new OrbitControls(this.camera, this.renderer.domElement);

    // 灯光
    const ambientLight = new THREE.AmbientLight(0xffffff, 0.7);
    this.scene.add(ambientLight);
    const dirLight = new THREE.DirectionalLight(0xffffff, 0.5);
    dirLight.position.set(100, 200, 100);
    this.scene.add(dirLight);

    // 地板
    const floorGeometry = new THREE.PlaneGeometry(100, 80);
    const floorMaterial = new THREE.MeshPhongMaterial({ color: 0x888888, side: THREE.DoubleSide });
    const floor = new THREE.Mesh(floorGeometry, floorMaterial);
    floor.rotation.x = -Math.PI / 2;
    this.scene.add(floor);

    // 墙体参数
    const wallHeight = 10;
    const wallThickness = 0.5;
    const wallMaterial = new THREE.MeshPhongMaterial({
      color: 0x3388ff,
      transparent: true,
      opacity: 0.5
    });

    // 前后墙
    const frontBackWallGeometry = new THREE.BoxGeometry(100, wallHeight, wallThickness);
    // 前墙
    const frontWall = new THREE.Mesh(frontBackWallGeometry, wallMaterial);
    frontWall.position.set(0, wallHeight / 2, 40);
    this.scene.add(frontWall);
    // 后墙
    const backWall = new THREE.Mesh(frontBackWallGeometry, wallMaterial);
    backWall.position.set(0, wallHeight / 2, -40);
    this.scene.add(backWall);

    // 左右墙
    const sideWallGeometry = new THREE.BoxGeometry(wallThickness, wallHeight, 80);
    // 左墙
    const leftWall = new THREE.Mesh(sideWallGeometry, wallMaterial);
    leftWall.position.set(-50, wallHeight / 2, 0);
    this.scene.add(leftWall);
    // 右墙
    const rightWall = new THREE.Mesh(sideWallGeometry, wallMaterial);
    rightWall.position.set(50, wallHeight / 2, 0);
    this.scene.add(rightWall);

    // 货架参数
    const shelfWidth = 20;
    const shelfHeight = 10;
    const shelfDepth = 2;
    const shelfMaterial = new THREE.MeshPhongMaterial({ color: 0xffaa00 });

    // 8层货架板，每层放10个白色箱子
    const shelfLayers = 8;
    const boxCountPerLayer = 10;
    const boxWidth = 1.5;
    const boxHeight = 0.6;
    const boxDepth = 1.5;
    const boxMaterial = new THREE.MeshPhongMaterial({ color: 0xffffff });

    for (let i = 0; i < shelfLayers; i++) {
      const y = (i * (shelfHeight / (shelfLayers - 1)));
      // 货架板
      const shelfBody = new THREE.Mesh(
        new THREE.BoxGeometry(shelfWidth, 0.3, shelfDepth),
        shelfMaterial
      );
      shelfBody.position.set(0, y + 0.15, 0);
      this.scene.add(shelfBody);

      // 箱子
      for (let j = 0; j < boxCountPerLayer; j++) {
        const x = -shelfWidth / 2 + boxWidth / 2 + j * ((shelfWidth - boxWidth) / (boxCountPerLayer - 1));
        const box = new THREE.Mesh(
          new THREE.BoxGeometry(boxWidth, boxHeight, boxDepth),
          boxMaterial
        );
        box.position.set(x, y + 0.3 + boxHeight / 2, 0); // 0.3为板厚
        this.scene.add(box);
      }
    }

    // 货架立柱
    const postGeometry = new THREE.BoxGeometry(0.2, shelfHeight, 0.2);
    for (let dx of [-shelfWidth/2+0.1, shelfWidth/2-0.1]) {
      for (let dz of [-shelfDepth/2+0.1, shelfDepth/2-0.1]) {
        const post = new THREE.Mesh(postGeometry, shelfMaterial);
        post.position.set(dx, shelfHeight/2, dz);
        this.scene.add(post);
      }
    }

    // 渲染循环
    const animate = () => {
      this.animationId = requestAnimationFrame(animate);
      this.controls.update();
      this.renderer.render(this.scene, this.camera);
    };
    animate();
  },
  beforeDestroy() {
    cancelAnimationFrame(this.animationId);
    this.renderer.dispose();
  }
};
</script>

<style scoped>
.three-container {
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
</style>